<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="8" class="btn-search">
          <div class="btn-box">
            <!-- <el-button type="info" icon="el-icon-refresh-left"></el-button> -->
            <el-button type="primary" icon="el-icon-circle-plus-outline"
              >新增</el-button
            >
            <el-button type="text"
              >导入 <img src="/images/upload.png" alt=""
            /></el-button>
            <el-button type="text"
              >导出 <img src="/images/download.png" alt=""
            /></el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="showCalendar">
            <div class="flex">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="calderTime">
              <div>{{ year }}年{{ month }}月{{ day }}日 星期二</div>
              <div>农历 立春</div>
            </div>
            <div class="flex texaAlign">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title">
            <span
              v-for="(item, key) in timeList"
              :class="{ active: current == key }"
              :key="key"
              @click="current = key"
              >{{ item }}</span
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="7" class="smallCander">
        <el-card>
          <div class="showCalendar calendarTop">
            <div class="flex">
              <i class="el-icon-arrow-left" @click="changeMonthPre"></i>
            </div>
            <div class="calderTime">
              <div>{{ year }}年{{ month }}月</div>
            </div>
            <div class="flex texaAlign">
              <i class="el-icon-arrow-right" @click="changeMonthNext"></i>
            </div>
          </div>
          <div class="candlerStyle">
            <ul>
              <li v-for="(num, index) in week" :key="index">{{ num }}</li>
            </ul>
            <ul>
              <li
                v-for="(pre, index) in preDay"
                :key="index"
                style="color: #999"
              >
                {{ getLastMonthSize() - preDay + pre }}
              </li>
              <li v-for="count in monthSize" :key="count + 'monthSize'">
                <span>{{ count }}</span>
              </li>
              <li
                v-for="next in nextDay"
                :key="next + 'nextDay'"
                style="color: #999"
              >
                <span>{{ next }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card class="bigCard">
          <div class="candlerStyle bigCandlerStyle">
            <ul class="week">
              <li v-for="(num, index) in week" :key="index">{{ num }}</li>
            </ul>
            <ul>
              <li
                v-for="(pre, index) in preDay"
                :key="index"
                style="background-color: #ecf0f4"
              >
                {{ getLastMonthSize() - preDay + pre }}
              </li>
              <li v-for="count in monthSize" :key="count + 'monthSize'">
                <span>{{ count }}</span>
                <div v-if="count == 10" class="taskStyle">
                  <el-popover placement="right"  trigger="click" :visible-arrow="false"  popper-class="popClass">
                      <div class="taskList">
                          <div style="color: #00b754">
                              <i class="icon-gwdian-yxz" ></i>我的任务
                          </div>
                          <div >
                              <i class="el-icon-date " style=" font-size: 13px;"></i>维护保养任务
                          </div>
                          <div >
                              <i class="el-icon-time" style=" font-size: 13px;"></i>02月07日 周五 13:00  - 13:35 
                          </div>
                          <div style="color:#00C0DE;text-align:right;  cursor: pointer;">
                              详情
                              <i class="el-icon-arrow-right" style="margin-right:0"></i>
                          </div>
                      </div>
                     <el-button type="primary" slot="reference">维护保养任务</el-button>
                   
                  </el-popover>
                 
                  <div>
                    <i class="icon-gwdian-yxz" style="color: #00b754"></i>
                    任务一
                  </div>
                  <div>
                    <i class="icon-gwdian-yxz" style="color: #00b754"></i>
                    任务一
                  </div>
                </div>
              </li>
              <li
                v-for="next in nextDay"
                :key="next + 'nextDay'"
                style="background-color: #ecf0f4"
              >
                <span>{{ next }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      year: 0,
      month: 0,
      day: 0,
      preDay: 0,
      nextDay: 0,
      monthSize: 0,
      current: 0,
      timeList: ["今天", "月", "周"],
      monthNum: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      week: ["日", "一", "二", "三", "四", "五", "六"],
      monthList: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
    };
  },
  created() {
    this.getCurrent();
    this.getLastMonthSize();
    this.getNextMothSize();
  },
  updated() {
    this.getLastMonthSize();
    this.getNextMothSize();
  },
  methods: {
    changeMonthNext() {
      if (this.month == 12) {
        this.year = this.year + 1;
        this.month = 1;
      } else {
        this.month++;
      }
    },
    changeMonthPre() {
      if (this.month == 1) {
        this.year = this.year - 1;
        this.month = 12;
      } else {
        this.month--;
      }
    },
    getCurrent() {
      const date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
      this.day = date.getDate();
      if (
        (this.year % 4 === 0 && this.year % 100 !== 0) ||
        this.year % 400 === 0
      ) {
        this.monthList[1] = 29;
      }
    },
    getLastMonthSize() {
      const mun = this.month - 1;
      this.monthSize = this.monthList[mun];

      const firstDay = new Date(`${this.year}/${this.month}/1`).getDay();
      this.preDay = firstDay === 7 ? 0 : firstDay;
      return this.month - 1 === 0 ? 31 : this.monthList[this.month - 2];
    },
    getNextMothSize() {
      this.monthSize = this.monthList[this.month - 1];
      const lastDay = new Date(
        `${this.year}/${this.month}/${this.monthSize}`
      ).getDay();
      this.nextDay = lastDay === 7 ? 6 : 6 - lastDay;
      console.log(this.monthSize);
    },
  },
};
</script>
<style scoped lang='scss'>

 
.el-col {
  margin-bottom: 0;
}
.showCalendar {
  display: flex;
  align-items: center;
  justify-content: center;
  .flex {
    flex: 1;
  }
  .texaAlign {
    text-align: right;
  }
  .calderTime {
    div {
      text-align: center;
    }
    div:nth-child(1) {
      font-size: 14px;
      font-weight: bold;
    }
    div:nth-child(2) {
      font-size: 14px;
      color: #101010;
    }
  }
}
.btn-box {
  img {
    vertical-align: sub;
    width: 18px;
  }
}
.title {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  display: inline-block;
  //   padding: 9px;
  border: 1px solid rgba(239, 236, 255, 100);
  float: right;
  span {
    font-size: 12px;
    color: rgba(154, 151, 173, 100);
    margin: 5px;
    display: inline-block;
    width: 50px;
    cursor: pointer;
  }
  .active {
    background-color: #52b7f5;
    color: white;
    padding: 5px;
    border-radius: 3px;
  }
}
.candlerStyle {
  ul {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 0;
    padding: 0;
    li {
      // float: left;
      list-style: none;
      line-height: 40px;
      color: #101010;
      font-size: 14px;
      text-align: center;
    }
  }
}
.calendarTop {
  margin-bottom: 10px;
  padding: 0 15px;
  font-weight: normal;
  margin-top: 20px;
}
::v-deep .smallCander {
  .el-card__body {
    padding: 0;
    height: 600px;
  }
}

::v-deep .bigCard {
  .el-card__body {
    padding: 10px 0 50px;
  }
  
  .bigCandlerStyle {
    ul {
      li {
        border: 1px solid #ecf0f4;
        height: 100px;
        text-align: right;
        line-height: 25px;
        padding-right: 5px;
        margin: 0 0 -1px -1px;
        .taskStyle {
          div {
            font-size: 13px;
            text-align: left;
            line-height: 20px;
          }
          .el-button--small {
            padding: 2px 4px;
            font-size: 13px;
          }
        }
      
      }
    }
    .week {
      li {
        text-align: center;
        height: 60px;
        line-height: 60px;
      }
    }
  }
}
  .taskList{
            div{
                font-size: 13px;
               margin-bottom: 5px;
               i{
                   margin-right: 10px;
               }
            }
        }
       
</style>